<template>
  <div class="box">
    <div class="head">
      <van-icon name="arrow-left"  @click="router.back()"/>
      <span>我们的服务</span>
      <van-icon name="ellipsis" style="transform: rotate(90deg);" />
    </div>
    <div class="head_two">
      <p>我们的服务</p>
      <p>查看全部</p>
    </div>
    <!-- 折叠面板 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="(i, idx) in dataList" @click="{
        active = idx
        console.log(active);
        console.log(activeNames);
      }" :class="{ 'active': active == idx }"
        :key="i.id" :title="i.title" style="margin: 20px 0;" :value="i.children.length+'种'" :name="idx + 1">
        <div v-for="item in i.children" :key="item.id">
          <p>{{ item.title }}</p>
          <p>￥{{ item.price }}</p>
        </div>
      </van-collapse-item>
    </van-collapse>
    <div class="bottom">
      <van-button type="primary" style="background-color: #ffb900;border-radius: 10px;
      border: none;width: 90%;height: 90%;font-size: 1.3rem;
      " block @click="router.push('/shopfrontxuanze')">现在预订</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
const activeNames = ref([]);
const dataList = reactive([
  {
    id: 1, title: "剪发", value: "7种", children: [
      { id: 11, title: "男士剪发", price: 14 },
      { id: 12, title: "女士剪发", price: 14 },
      { id: 13, title: "儿童剪发", price: 14 },
    ]
  },
  {
    id: 2, title: "胡须修剪", value: "7种", children: [
      { id: 21, title: "男士胡须修剪", price: 20 },
      { id: 22, title: "女士胡须修剪", price: 20 },
      { id: 23, title: "儿童胡须修剪", price: 20 },
    ]
  },
])
const active = ref(0)
const router=useRouter()

</script>
<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 1rem;
  background-color: #f5f5f5
}

.head {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
}

.head_two {
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head_two p:nth-child(1) {
  font-size: 1.3rem;
}

.head_two p:nth-child(2) {
  font-size: 1.1rem;
  color: #ffc08c;
}

.active {
  background-color: orange ;
  border: 1px solid orange;

}
.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>